Parent | Child | Previous | Next
 

Using HTML in an Xdialog

Description

Xdialog is a very good way to display data to a user, and to collect data from a user. Xdialog's display options, however, do not give you the full richness of HTML. This topic shows you how you can combine the best of Xdialog and HTML to create beautiful, dynamic dialog boxes.

A Little Background

When a browser displays HTML, the HTML is actually parsed by the browser into a collection of objects called the Document Object Model, or DOM. It is possible to interact with the DOM programmatically, and dynamically change what's displayed in the browser. Most commonly, JavaScript is used to program against the DOM. However, Xbasic can also be used to program against the DOM, and this topic describes the process.

Getting Started - Putting the DHTMLEDIT ActiveX Control on an Xdialog

To display HTML content in an Xdialog, you can use a Microsoft ActiveX control that is available on your computers. This control is called the DHTMLEdit control.

  1. Create a new Action Script.

  2. Select Add New Action > Xdialog Windows > Display an XDialog Box.

  3. Enter xx into the Variable Name field.

  4. and set the variable style to "HTML Text".

    images/XD_HTML_in_Xdialog_1.gif

  5. Click Next > Next > Next > Finish until the Script Genie closes.

  6. In the Code Editor right select the new action script and click Convert to Inline Xbasic > OK.

  7. Right select the new action script and click View Xbasic. You will see the following code. 

    'Create an XDialog dialog box to prompt for parameters.
DIM xx as P
dim xx.object as p
dim xx.class as c
xx.class = "dhtmledit.dhtmledit"
DIM SHARED varC_result as C
DIM xx_html as c
xx_html = <<%html%
%html%
'Force the background color of the html text to be Win3D so that it blends in with the Xdialog box.
dim win3dcolor as c
win3dcolor = ui_color_format("win3d","#rhghbh")
xx_html = a5_html_background(xx_html,win3dcolor)
ok_button_label = "&OK"
cancel_button_label = "&Cancel"
varC_result = ui_dlg_box("Alpha Anywhere",<<%dlg%
{startup=init}
{region}
| {activex=40,5xx?.f.};
{endregion};
{line=1,0};
{region}
<*15=ok_button_label!OK> <15=cancel_button_label!CANCEL>
{endregion};
%dlg%,<<%code%
if a_dlg_button = "init" then
xx.object.browsemode = .t.
xx.object.appearance = 0
xx.object.ScrollBars = .f.
on error goto xx_error
xx.object.documenthtml = xx_html
on error goto 0
xx.object.Refresh()
a_dlg_button = ""
end if
end
xx_error:
ui_msg_box("Error","Invalid URL or HTML content.",UI_STOP_SYMBOL)
end
%code%)

  8. The next steps are to make the following changes:

    • 1. Change the Xdialog from a modal to a modeless Xdialog.

    • 2. Change the variable that references the ActiveX control into a global variable. We do this so that we can experiment with the DOM properties from the Interactive window. Experimenting with the DOM properties from the Interactive window is a great way to learn about programming the DOM.

    • 3. Define some HTML to display.

  9. Edit the Xbasic code so that it looks like this. The changes are shown in blue. Quite a few lines of the generated Xbasic have been deleted. 

    DIM global xx as P
dim global xx.object as p
dim global xx.class as c
xx.class = "dhtmledit.dhtmledit"
DIM html_html as C
html_html = <<%html%          
Firstname                
Lastname